* {
    padding: 0;
    margin: 0;
  }
  
  @boxSize: 200px;
  @boxColor: saddlebrown;
  @sonSize: 100px;
  @sonColor: red;
  
  .father1 {
    width: @boxSize;
    height: @boxSize;
    border: 1px @boxColor solid;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .son1 {
      position: absolute;
      top: 50%;
      left: 50%;
      width: @sonSize;
      height: @sonSize;
      border: 1px @sonColor solid;
      transform: translate(-50%, -50%);
      background-color: aqua;
    }
  }
  
  .father2 {
    margin: 0 auto;
    width: @boxSize;
    height: @boxSize;
    border: 1px @boxColor solid;
    position: relative;
    
    .son2 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: @sonSize;
      height: @sonSize;
      border: 1px @sonColor solid;
      margin: auto;
      background-color: rebeccapurple;
    }
  }
  
  .father3 {
    margin: 0 auto;
    width: @boxSize;
    height: @boxSize;
    border: 1px @boxColor solid;
    display: grid;
    place-items: center;
    
    .son3 {
      width: @sonSize;
      height: @sonSize;
      border: 1px @sonColor solid;
      background-color: red;
    }
  }
  
  .father4 {
    margin: 0 auto;
    width: @boxSize;
    height: @boxSize;
    border: 1px @boxColor solid;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .son4 {
      width: @sonSize;
      height: @sonSize;
      border: 1px @sonColor solid;
      text-align: center;
      line-height: @sonSize;
      background-color: rgb(140, 100, 179);
    }
  }
  
  table {
    width: 100%;
    height: 100vh;
    border-collapse: collapse;
  }
  
  td {
    text-align: center;
    vertical-align: middle;
  }
  
  .box {
    display: inline-block;
    width: @boxSize;
    height: @boxSize;
    border: 1px solid black;
  }